<template>
    <div class="app-card">
        <el-card class="el-card-style">
            <!-- 操作按钮区域 -->
            <div style="display: flex; justify-content: space-between;">
                <div>
                    <el-button
                        type="primary"
                        :icon="Search"
                        @click="init"
                    >
                        查询
                    </el-button>
                </div>
                <div>
                    <el-button
                        type="danger"
                        :icon="Delete"
                        @click="delBtn"
                        plain
                    >
                        删除
                    </el-button>
                </div>
            </div>

            <table-panel
                style="margin-top: 10px;"
                :isSelect="true"
                :loading="tablePanelConfig.loading"
                :tableData="tablePanelConfig.tableData"
                :height="tablePanelConfig.height"
                :columns="tablePanelConfig.columns"
                :total="tablePanelConfig.total"
                :currentPage="tablePanelConfig.currentPage"
                :pageCount="tablePanelConfig.pageCount"
                :operationBtn="tablePanelConfig.operationBtn"
                @handleCurrentChange="handleCurrentChange"
                @selectionChange="selectionChange"
            />
        </el-card>

        <!-- 添加/编辑弹窗 -->
        <employment-registration-dialog
            ref="employmentRegistrationDialog"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    Search,
    Delete
} from '@element-plus/icons-vue'
import TablePanel from '@/components/company/TablePanel.vue'
import http from '@/api/http'
import { formatYearMonthDate } from '@/uitils/formatTime'
import EmploymentRegistrationDialog from '@/components/company/EmploymentRegistrationDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 变量
const tablePanelConfig = ref(
    {
        loading: false,
        tableData: [],
        height: 'calc(100vh - 240px)',
        columns: [
            {
                label: '姓名',
                prop: 'name',
                formatter: (row) => {
                    return row.name
                }
            },
            {
                label: '性别',
                prop: 'gender',
                formatter: (row) => {
                    return row.gender
                }
            },
            {
                label: '民族',
                prop: 'nation',
                formatter: (row) => {
                    return row.nation
                }
            },
            {
                label: '籍贯',
                prop: 'nativePlace',
                formatter: (row) => {
                    return row.nativePlace
                }
            },
            {
                label: '身份证号',
                prop: 'idNumber',
                formatter: (row) => {
                    return row.idNumber
                }
            },
            {
                label: '出生日期',
                prop: 'birthday',
                formatter: (row) => {
                    return formatYearMonthDate(row.birthday)
                }
            },
            {
                label: '学历',
                prop: 'education',
                formatter: (row) => {
                    return row.education
                }
            },
            // {
            //     label: '审批状态',
            //     prop: 'AuditStatus',
            //     formatter: (row) => {
            //         switch (row.AuditStatus) {
            //             case 0:
            //                 return '待审核'
            //             case 1:
            //                 return '通过'
            //             case 2:
            //                 return '审核中'
            //             case 3:
            //                 return '拒绝'
            //         }
            //     }
            // },
            {
                label: '创建人',
                prop: 'Creator',
                formatter: (row) => {
                    return row.Creator
                }
            },
            {
                label: '创建时间',
                prop: 'CreateDate',
                minWidth: '130',
                formatter: (row) => {
                    return row.CreateDate
                }
            }
        ],
        total: 0,
        currentPage: 1,
        pageCount: 1,
        operationBtn: [
            {
                dynamicName: (row) => {
                    return {
                        name: '查看'
                    }
                },
                click: (row) => {
                    lookBtn(row)
                }
            }
        ]
    }
)
const employmentRegistrationDialog = ref(null)
const selectionData = ref([])

// 函数
onMounted(() => {
    init()
})

function init() {
    tablePanelConfig.value.loading = true
    const params = {
        order: 'desc',
        page: tablePanelConfig.value.currentPage,
        rows: 100,
        sort: 'CreateDate'
    }
    http.post('/api/EPersonInfo/getPageData', params).then(res => {
        tablePanelConfig.value.tableData = res.rows
        tablePanelConfig.value.total = res.total
        tablePanelConfig.value.loading = false
    }).catch(error => {
        console.log(error)
        tablePanelConfig.value.loading = false
    })
}

function handleCurrentChange(val) {
    tablePanelConfig.value.currentPage = val
    init()
}

function lookBtn(row) {
    employmentRegistrationDialog.value.open(
        {
            tag: 'look',
            title: '人员信息',
            row: row
        }
    )
}

function selectionChange(val) {
    selectionData.value = val
}

function delBtn() {
    if (selectionData.value.length === 0) {
        ElMessage({
            message: '请选择需要删除的数据！',
            type: 'warning'
        })
    } else {
        ElMessageBox.confirm(
            '确定要删除所选数据吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                draggable: true,
                closeOnClickModal: false
            }
        )
        .then(() => {
            doDelBtn(selectionData.value)
        }).catch(() => {})
    }
}

function doDelBtn(selectionData) {
    let ids = []
    for (const item of selectionData) {
        ids.push(item.id)
    }
    http.post('/api/EPersonInfo/del', ids).then(res => {
        init()
        ElMessage({
            message: '删除成功！',
            type: 'success'
        })
    }).catch(error => {
        console.log(error)
    })
}
</script>

<style lang="less" scoped>
.app-card {
    width: 100%;
    height: calc(100vh - 95px);
    padding: 5px;
}

.el-card-style {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>
